<template>
  <div class="InformationList">
    <div class="flex location-wrap">
        <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">预警管理</el-breadcrumb-item>
        <el-breadcrumb-item>预警措施</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="InformationList-center">
      <div class="InformationList-form">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
          <el-form-item label="预警通知单名称:">
            <el-input placeholder="请输入内容" v-model="formInline.warningNoticeName" clearable>
            </el-input>
          </el-form-item>
          <el-form-item label="相关单位:">
            <el-select v-model="formInline.dutyDeptName" placeholder="请选择">
              <el-option label="安监部" value="安监部"></el-option>
              <el-option label="设备部" value="设备部"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态:">
            <el-select v-model="formInline.feedbackState" placeholder="请选择">
              <el-option label="已反馈" value="1"></el-option>
              <el-option label="未反馈" value="0"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="反馈时间:">
            <el-date-picker type="datetime" placeholder="请选择" v-model="formInline.feedbackTime" style="width: 100%"></el-date-picker>
          </el-form-item>
          <el-form-item class="QueryAndReset_btn">
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <el-button @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="InformationList-btnadd">
        <el-row>
          <el-button size="small" type="primary">导出</el-button>
        </el-row>
      </div>
      <div class="InformationList-table">
        <el-table :data="tableData" :span-method="arraySpanMethod" :row-class-name="tableRowClassName">
          <el-table-column prop="noticeId" label="序号" min-width="80">
          </el-table-column>
          <el-table-column prop="warningNoticeName" label="预警通知单名称" min-width="120">
          </el-table-column>
          <el-table-column prop="dutyDeptName" label="涉及相关单位/部门" min-width="100">
            <template slot-scope="scope">
              <el-button @click="detailList(scope.$index, scope.row)" type="text" size="small">
                {{ scope.row.dutyDeptName }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="measureRequire" label="有关措施及要求" min-width="400">
          </el-table-column>
          <el-table-column prop="secondUnitName" label="二级单位" min-widthh="120">
          </el-table-column>
          <el-table-column prop="measurePracticable" label="措施落实" min-width="520">
          </el-table-column>
          <el-table-column prop="feedbackState" label="状态" min-width="80">
          </el-table-column>
          <el-table-column prop="feedbackTime" label="反馈时间" min-width="200">
          </el-table-column>
        </el-table>
        <div style="margin-top: 10px,float: right" class="InformationList-table-pag flexBetween">
          <div class="fontSize14">共一条数据，共{{total%5}}页</div>
          <el-pagination background layout="prev, pager, next" :total="total" @current-change="currentChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { listPage } from "@/api/EarlyWarningManagement/yjcs";

export default {
  name: "MeasuresList",
  components: {},
  data() {
    return {
      formInline: {
        date1: "",
        region: ""
      },
      tableData: [],
      tableDataGroup: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      multipleSelection: []
    };
  },
  mounted() {
    this.list();
  },
  methods: {
    currentChange(cur) {
      this.pageNum = cur;
      this.list();
    },
    // 检索
    onSubmit() { },
    // 列表
    async list() {
      const parmas = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      };
      const res = await listPage(parmas);
      const tableDataGroup = _.groupBy(res.data.filter(i => Boolean(i.noticeId)), "noticeId");
      for (const i in tableDataGroup) {
        for (let j = 0; j < tableDataGroup[i].length; j++) {
          if (j === 0) {
            tableDataGroup[i][j].rowspan = tableDataGroup[i].length;
          } else {
            tableDataGroup[i][j].rowspan = 0;
          }
        }
      }
      const resData = Object.values(tableDataGroup).flat(Infinity);
      console.log(resData);
      this.tableData = resData;
      this.total = res.total;
    },
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      const cells = ["noticeId", "warningNoticeName"];
      if (cells.includes(column.property)) {
        return {
          rowspan: row.rowspan,
          colspan: 1
        };
      }
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "white-row";
      }
      return "";
    },
    detailList(event) {
      console.log(event);
      this.$router.push({
        name: "MeasuresDetail",
        params: { indexs: event }
      });
    }
  }
};
</script>

<style scoped lang="less">
@btnColor: #3561fd;
.InformationList {
  width: 100%;
  height: 100%;
}
:deep(.el-button--primary) {
  background-color: @btnColor;
}
:deep(.el-pagination.is-background .el-pager li:not(.disabled).active) {
  background-color: @btnColor;
}
:deep(.el-breadcrumb) {
  font-size: 16px;
  line-height: initial;
}
:deep(.el-breadcrumb__inner.is-link) {
  font-weight: 100;
  color: #fff;
}
:deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
  color: #3270ff;
}
:deep(.el-form-item--small) {
  line-height: 0px;
  margin-right: 10px;
}
:deep(.el-form) {
  margin-left: 1%;
}
:deep(.el-table) {
  tr {
    th {
      background: #f3f3f5;
    }
  }
  .white-row {
    background: #f3f3f5;
  }
  .el-table__cell {
    color: #000;
    text-align: center;
    padding: 5px 0;
  }
  td {
    .el-table__cell.el-table_1_column_4,
    .el-table_1_column_6 {
      text-align: left;
    }
    .el-button--text {
      text-decoration: underline;
    }
  }
}
.InformationList-center {
  width: 100%;
  height: 100%;
  background-color: #fff;
  margin-top: 10px;
  position: relative;
}
.InformationList-form {
  width: 100%;
  padding-top: 15px;
}
.InformationList-table {
  width: 100%;
  height: 75%;
  margin-top: 20px;
  overflow-y: auto;
}
.InformationList-btnadd {
  width: 100%;
  margin-left: 16px;
}
.InformationList-table-pag {
  float: right;
  position: absolute;
  right: 1%;
  bottom: 2%;
  > div {
    line-height: 32px;
  }
}
.QueryAndReset_btn {
  position: absolute;
  right: 1%;
}
</style>
